<template>
  <Page title="成绩录入" :on-page-back="onPageBack">
    <template #navBarCustom>
      <div class="nav-bar-btns flex">
        <div class="item flex items-center" @click="showSettingModal">
          <img class="icon mt-2px mr-4px" src="static/icons/setting.png" mode="" />
          <span class="name text-white">设置</span>
        </div>
      </div>
    </template>
    <template #content>
      <div class="w-full h-full px-20px box-border flex flex-col">
        <!-- 学科列表 -->
        <subject-tabs
          class="py-16px"
          :tabs="subjects.list"
          :active="subjects.active"
          @change="subjects.onChange($event)"
        />
        <!-- 作业列表 -->
        <scroll-view
          ref="scroll"
          class="flex-1 overflow-scroll"
          :refresher-enabled="true"
          :refresher-loader-offset-y="-16"
          @scrolltolower="homeworks.getList(subjects.active)"
          @refresh="homeworks.refresh($event)"
        >
          <homework-list :list="homeworks.list" @todo="homeworks.todo($event)" />
          <load-more
            cssStyle="padding-top:0.14rem"
            :loading="homeworks.loading"
            :has-more="homeworks.hasMore"
            @click="homeworks.getList(subjects.active)"
          />
        </scroll-view>
        <!-- 设置 -->
        <div class="setting-wrap flex flex-col justify-center" v-show="settings.isShowSettingModal">
          <div class="setting bg-white px-40px py-30px relative flex flex-col">
            <div class="header relative w-full flex justify-center items-center text-white">
              <img
                class="close absolute"
                src="static/icons/close.png"
                mode=""
                @click="settings.isShowSettingModal = false"
              />
              <div class="title font-medium text-262A30">设置</div>
            </div>
            <div class="main text-A3A3A3 py-30px flex-center flex-1 flex-col">
              <div class="item flex items-center mb-20px">
                <span class="label text-right" style="width: 1.4rem">科目：</span>
                <el-select
                  v-model="settings.subjects.value"
                  class="flex-1"
                  placeholder="请选择"
                  @change="settings.onSubjectChange($event)"
                >
                  <el-option
                    v-for="item in settings.subjects.list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="item flex items-center mb-20px" @click="showChooseStudentModal">
                <span class="label text-right" style="width: 1.4rem">录入对象：</span>
                <el-input
                  class="flex-1"
                  :readonly="true"
                  :placeholder="
                    settings.inputer.checkedList.length > 0
                      ? `${settings.inputer.checkedList.length}人`
                      : '请选择'
                  "
                />
              </div>
              <div class="item flex items-center mb-20px">
                <span class="label text-right" style="width: 1.4rem">请选择：</span>
                <el-select
                  v-model="settings.correcter.value"
                  class="flex-1"
                  placeholder="请选择"
                  style="width: 2rem"
                >
                  <el-option
                    v-for="item in settings.correcter.list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="footer flex justify-center">
              <CustomButton class="block" style="width: 2rem" @click="settings.submit()"
                >提交</CustomButton
              >
            </div>
          </div>
        </div>
        <!-- 选择录入对象 -->
        <div
          class="choose-student-wrap flex flex-col justify-center"
          v-show="settings.isShowChooseStudentModal"
        >
          <div class="choose-student bg-white px-30px relative flex flex-col">
            <img
              class="close absolute"
              src="static/icons/close.png"
              mode=""
              @click="settings.isShowChooseStudentModal = false"
            />
            <div class="main text-A3A3A3 flex flex-1 overflow-hidden">
              <div class="left w-p-50 h-full flex flex-col">
                <div class="header text-333 flex items-center" style="flex: none">
                  <el-radio-group
                    v-model="settings.inputer.searchBy"
                    class="flex items-center"
                    @input="settings.inputer.onRadioChange($event)"
                  >
                    <CustomRadio label="class" text="按班级" />
                    <CustomRadio label="group" text="按分组" />
                  </el-radio-group>
                </div>
                <div class="flex-1 flex flex-col pr-30px py-20px box-border overflow-hidden">
                  <el-input v-model="settings.inputer.searchKey" placeholder="搜索" />
                  <el-tree
                    ref="student_tree"
                    class="h-full mt-20px overflow-scroll tree-line"
                    :props="settings.inputer.treeProps"
                    :filter-node-method="settings.inputer.filterNode"
                    :data="settings.inputer.treeList"
                    show-checkbox
                    node-key="id"
                    :default-expanded-keys="[]"
                    :default-checked-keys="[]"
                    default-expand-all
                    @check-change="settings.inputer.onTreeCheckChange(arguments)"
                  >
                    <template #default="{ node, data }">
                      <div class="custom-tree-node flex items-center">
                        <img style="width: 0.3rem;height: 0.3rem;" src="@/assets/exercise/jiahao@2x.png" alt="" v-if="data.children && data.children.length !== 0">
                        <span style="font-size: 0.26rem;">{{ node.label }}</span>
                      </div>
                    </template>
                  </el-tree>
                </div>
              </div>
              <div class="right w-p-50 h-full flex flex-col">
                <div class="header flex items-center text-333">
                  <span class="ml-30px"
                    >已选择<span class="text-51C3FF">{{
                      settings.inputer.checkedListTemp.length
                    }}</span
                    >位人员</span
                  >
                </div>
                <div class="flex-1 flex flex-col pl-30px py-20px box-border overflow-hidden">
                  <div class="flex-1 overflow-scroll">
                    <div
                      class="student-item flex items-center py-15px"
                      v-for="student in settings.inputer.checkedListTemp"
                      :key="student.id"
                    >
                      <div class="avatar bg-51C3FF text-white flex-center">{{
                        student.label.slice(-2)
                      }}</div>
                      <div class="flex-1 name text-333 ml-10px">{{ student.label }}</div>
                      <img
                        class="close"
                        src="static/icons/close-round.png"
                        alt=""
                        srcset=""
                        @click="settings.inputer.onTreeCheckedRemove(student)"
                      />
                    </div>
                  </div>
                  <div class="footer flex justify-between pt-30px pb-10px">
                    <CustomButton
                      class="cancel block box-border"
                      style="width: 1.64rem"
                      @click="settings.isShowChooseStudentModal = false"
                      >取消</CustomButton
                    >
                    <CustomButton
                      class="confirm block"
                      style="width: 1.64rem"
                      @click="settings.inputer.confirm()"
                      >确认</CustomButton
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div></div>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page'
import SubjectTabs from '@/components/subject/tabs'
import ScrollView from '@/components/scroll-view'
import HomeworkList from './components/homework-list'
import LoadMore from '@/components/load-more'
import CustomButton from '@/components/button'
import CustomRadio from '@/components/radio'
import {
  getStudentExamSubjectApi,
  getStudentByClassApi,
  getStudentByGroupApi,
  getQuestionsApi,
  getStudentExamByUpScoreListApi
} from '@/api/homework-input'
import { mapState, mapGetters, mapActions } from 'vuex'
import { debounce } from '@/utils'
import { MODULE_ID } from '@/store/modules/module-use'

export default {
  components: {
    Page,
    ScrollView,
    SubjectTabs,
    HomeworkList,
    LoadMore,
    CustomButton,
    CustomRadio
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.params.completed) {
        const subjectId = vm.subjects.active
        vm.homeworks.reset()
        vm.homeworks.getList(subjectId)
      }
    })
  },
  data() {
    return {
      loading: null,
      examIds: {},
      storageExamIds: {},
      // 设置
      settings: {
        vm: this._self,
        isShowSettingModal: false,
        isShowChooseStudentModal: false,
        subjects: {
          value: '',
          list: []
        },
        onSubjectChange: function (subjectId) {
          // 清空数据
          this.inputer.checkedList = []
          this.inputer.checkedListTemp = []
          this.inputer.list = []
          this.inputer.treeList = []
          // 从缓存读取
          this.vm.$storage.homework_input
            .getSubjectSettingsItem(subjectId)
            .then(({ success, data }) => {
              if (success) {
                const {
                  inputer: { checkedList },
                  correcter: { value }
                } = data

                this.inputer.checkedList = checkedList
                this.inputer.checkedListTemp = checkedList
                this.correcter.value = value
              } else {
                this.correcter.value = '1'
              }
            })
        },
        inputer: {
          vm: this._self,
          searchBy: 'class',
          onRadioChange: async function (value, list = []) {
            const checkedListTemp = JSON.parse(JSON.stringify(this.checkedListTemp))
            const subjectId = this.vm.settings.subjects.value
            switch (value) {
              case 'class':
                this.searchBy = 'class'
                if (list.length === 0) {
                  const { data: classList } = await getStudentByClassApi({
                    subjectId
                  })
                  list = classList
                  this.list = classList
                }

                try {
                  this.treeList = list
                    .map((item) => {
                      const { id, className, studentUserDOList = [] } = item
                      const classId = `class-${id}`

                      return {
                        id: classId,
                        label: className,
                        data: item,
                        children: studentUserDOList
                          .map((student) => {
                            const { id: studentId, nickname } = student

                            if (!this.searchKey) {
                              return {
                                id: `${classId}-${studentId}`,
                                label: nickname,
                                data: student,
                                children: []
                              }
                            } else if (this.searchKey && nickname.indexOf(this.searchKey) != -1) {
                              return {
                                id: `${classId}-${studentId}`,
                                label: nickname,
                                data: student,
                                children: []
                              }
                            } else {
                              return null
                            }
                          })
                          .filter((student) => !!student)
                      }
                    })
                    .filter((item) => item.children.length)
                  // this.checkedListTemp = this.checkedList
                  this.vm.$nextTick(() => {
                    // 全选
                    this.setCheckedNodes(
                      checkedListTemp.length
                        ? checkedListTemp
                        : this.treeList.map((item) => item.children).flat(Infinity)
                    )
                  })
                } catch (error) {}
                break
              case 'group':
                this.searchBy = 'group'
                if (list.length === 0) {
                  const { data: groupList } = await getStudentByGroupApi({
                    subjectId
                  })
                  list = groupList
                  this.list = groupList
                }

                try {
                  this.treeList = list
                    .map((item) => {
                      const { id, groupName, studentUserDOList = [] } = item
                      const groupId = `group-${id}`

                      return {
                        id: groupId,
                        label: groupName,
                        data: item,
                        children: studentUserDOList
                          .map((student) => {
                            const { id: studentId, nickname } = student

                            if (!this.searchKey) {
                              return {
                                id: `${groupId}-${studentId}`,
                                label: nickname,
                                data: student,
                                children: []
                              }
                            } else if (this.searchKey && nickname.indexOf(this.searchKey) != -1) {
                              return {
                                id: `${groupId}-${studentId}`,
                                label: nickname,
                                data: student,
                                children: []
                              }
                            } else {
                              return null
                            }
                          })
                          .filter((student) => !!student)
                      }
                    })
                    .filter((item) => item.children.length)
                  // this.checkedListTemp = this.checkedList
                  this.vm.$nextTick(() => {
                    // 全选
                    this.setCheckedNodes(
                      checkedListTemp.length
                        ? checkedListTemp
                        : this.treeList.map((item) => item.children).flat(Infinity)
                    )
                  })
                } catch (error) {}
                break
              default:
                break
            }
          },
          searchKey: '',
          filterNode: function (value, data) {
            if (!value) return true

            if (data.children.length > 0) return false

            return data.label.indexOf(value) !== -1
          },
          checkedList: [],
          checkedListTemp: [],
          list: [],
          treeList: [],
          treeProps: {
            children: 'children',
            label: 'label'
          },
          setCheckedNodes(list) {
            if (!Array.isArray(list)) return

            const shouldCheckedNodes = []
            list.forEach((item) => {
              const [type, typeId, item_studentId] = item.id.split('-')

              shouldCheckedNodes.push(
                ...this.treeList
                  .map((item) => {
                    return item.children.filter((i) => i.id.indexOf(item_studentId) != -1)
                  })
                  .flat(Infinity)
              )
            })
            this.vm.$refs.student_tree.setCheckedNodes(shouldCheckedNodes)
          },
          onTreeCheckChange: function (params) {
            const { id: currentNodeId, children = [] } = params[0]
            const currentChecked = params[1]

            // 不是叶子节点跳过
            if (children.length > 0) return

            // 取消勾选
            if (!currentChecked) {
              const shouldNotCheckedNodes = []
              shouldNotCheckedNodes.push(
                ...this.treeList
                  .map((item) => {
                    return item.children.filter((i) => {
                      const [type, typeId, i_studentId] = i.id.split('-')

                      return currentNodeId.indexOf(i_studentId) != -1
                    })
                  })
                  .flat(Infinity)
              )
              shouldNotCheckedNodes.forEach((i) => {
                this.checkedListTemp.find((item, index) => {
                  if (item.id === i.id) {
                    this.checkedListTemp.splice(index, 1)
                    return true
                  }
                })
                this.vm.$refs.student_tree.setChecked(i, false)
              })
              return
            }

            // 勾选节点
            const checkedNodes = this.vm.$refs.student_tree.getCheckedNodes(true)
            const checkedListTemp = checkedNodes.reduce((checkedListTemp, checkedItem) => {
              if (
                checkedListTemp.find((item) => {
                  const [type, typeId, studentId] = item.id.split('-')
                  const [type_checked, typeId_checked, studentId_checked] =
                    checkedItem.id.split('-')
                  return studentId === studentId_checked
                })
              ) {
                return checkedListTemp
              } else {
                return checkedListTemp.concat(checkedItem)
              }
            }, [])

            const shouldCheckedNodes = []
            checkedListTemp.forEach((item) => {
              const [type, typeId, item_studentId] = item.id.split('-')

              shouldCheckedNodes.push(
                ...this.treeList
                  .map((item) => {
                    return item.children.filter((i) => {
                      const [type, typeId, i_studentId] = i.id.split('-')

                      if (!currentChecked && currentNodeId.indexOf(i_studentId) != -1) {
                        return false
                      } else {
                        return i.id.indexOf(item_studentId) != -1
                      }
                    })
                  })
                  .flat(Infinity)
              )
            })
            this.vm.$refs.student_tree.setCheckedNodes(shouldCheckedNodes)
            this.checkedListTemp = checkedListTemp
          },
          onTreeCheckedRemove: function (student) {
            this.onTreeCheckChange({
              0: student,
              1: false
            })
          },
          confirm: function () {
            this.checkedList = this.checkedListTemp
            this.vm.settings.isShowChooseStudentModal = false
          }
        },
        correcter: {
          value: '1',
          list: [
            { label: '默认全对', value: '1' },
            { label: '默认全错', value: '0' }
          ]
        },
        async init({ subjects }) {
          // 初始化科目
          this.subjects = subjects
          // 从缓存读取
          const { value: subjectId } = subjects
          this.vm.$storage.homework_input
            .getSubjectSettingsItem(subjectId)
            .then(({ success, data }) => {
              if (success) {
                const {
                  inputer: { checkedList },
                  correcter: { value }
                } = data

                this.inputer.checkedList = checkedList
                this.inputer.checkedListTemp = checkedList
                this.correcter.value = value
              } else {
                this.correcter.value = '1'
              }
            })
            .finally(() => {
              this.isShowSettingModal = true
            })
        },
        submit() {
          if (this.inputer.checkedList.length === 0) {
            this.vm.$message.info('请选择录入对象')
            return
          }

          const subjectId = this.subjects.value

          this.vm.$storage.homework_input
            .getSubjectSettingsItem(subjectId)
            .then(({ success, data }) => {
              if (success) {
                this.vm.$storage.homework_input.putSubjectSettingsItem({
                  subjectId: this.subjects.value,
                  value: {
                    inputer: {
                      checkedList: this.inputer.checkedList
                    },
                    correcter: {
                      value: this.correcter.value
                    },
                    notSubmitStudentIds: data.notSubmitStudentIds ? data.notSubmitStudentIds : []
                  }
                })
              } else {
                this.vm.$storage.homework_input.setSubjectSettingsItem({
                  subjectId: this.subjects.value,
                  value: {
                    inputer: {
                      checkedList: this.inputer.checkedList
                    },
                    correcter: {
                      value: this.correcter.value
                    },
                    notSubmitStudentIds: []
                  }
                })
              }
            })

          this.isShowSettingModal = false
        }
      },
      // 学科栏目
      subjects: {
        vm: this._self,
        active: '',
        list: [],
        getList: async function (callback) {
          const { data = [] } = await getStudentExamSubjectApi()
          const subjects = await this.vm.getDictByType('subject')

          const list = []
          data.forEach((i) => {
            const subject = subjects.find((s) => s.value == i.subjectId)
            list.push({
              dictType: 'subject',
              label: subject.label,
              status: 0,
              value: subject.value
            })
          })

          // 如果没有开通的科目，弹出弹窗
          if (list.length === 0) {
            this.vm.$popup.show({
              type: 'alert',
              success: (popup) => {
                popup.$on('confirm', () => {
                  this.vm.$popup.hide('alert')
                  this.vm.$router.back()
                })
                popup.setData({
                  content: '没有已开通的科目'
                })
              }
            })
            return
          }

          this.list = list.map((item, index) => {
            index === 0 && (this.active = item.value)
            const { value: subjectId } = item
            subjectId &&
              this.vm.$storage.homework_input
                .getExamIdsItem(subjectId)
                .then(({ success, data }) => {
                  success && (this.vm.storageExamIds[subjectId] = data)
                })
            return item
          })
          callback(this.active)
        },
        onChange: debounce(function (subjectId) {
          // 上传模块使用时间
          this.vm.$store.state.moduleUse.currentModuleUse.submit()
          // 重置
          this.vm.$store.state.moduleUse.currentModuleUse.onSubjectChange(subjectId)

          this.active = subjectId
          this.vm.homeworks.reset()
          this.vm.homeworks.getList(subjectId)
        }, 300)
      },
      // 作业列表
      homeworks: {
        vm: this._self,
        pageNo: 1,
        pageSize: 12,
        loading: true,
        hasMore: true,
        list: [],
        getList: async function (subjectId) {
          if (this.loading) return

          this.loading = true
          const homeworks = this.list

          let params = {
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }

          if (subjectId) params['subject'] = subjectId

          const { data, msg } = await getStudentExamByUpScoreListApi(params)

          if (!data) {
            this.vm.$popup.show({
              type: 'alert',
              success: (popup) => {
                popup.$on('confirm', () => {
                  this.vm.$popup.hide('alert')
                  this.vm.$router.back()
                })
                popup.setData({
                  content: msg
                })
              }
            })
          }

          const { list } = data
          if (list.length < this.pageSize) {
            this.hasMore = false
          }

          if (list.length > 0) {
            const { examIds } = this.vm

            homeworks.push(
              ...list.map((item) => {
                const currentSubjectId = this.vm.subjects.active
                const { subject: subjectId, id: examId } = item
                const storage_exam_ids_item = this.vm.storageExamIds[currentSubjectId]

                // 标记是否已读
                if (!currentSubjectId) {
                  item['unread'] = 1
                  for (let subjectId in this.vm.storageExamIds) {
                    if (this.vm.storageExamIds[subjectId].find((id) => id === examId)) {
                      item['unread'] = 0
                      break
                    }
                  }
                } else if (
                  storage_exam_ids_item &&
                  storage_exam_ids_item.find((id) => id === examId)
                ) {
                  item['unread'] = 0
                } else {
                  item['unread'] = 1
                }

                // 缓存id
                if (examIds[subjectId]) {
                  const exam_ids = examIds[subjectId]
                  examIds[subjectId] = Array.from(new Set(exam_ids.concat(examId)))
                } else {
                  examIds[subjectId] = [examId]
                }

                return item
              })
            )
            this.pageNo++
          }

          this.loading = false
        },
        refresh: async function (done = () => {}) {
          const currentSubjectId = this.vm.subjects.active
          const params = {
            pageNo: (this.pageNo = 1),
            pageSize: this.pageSize,
            subject: currentSubjectId ? currentSubjectId : undefined
          }

          const {
            data: { list }
          } = await getStudentExamByUpScoreListApi(params)

          this.list.length = 0
          this.list.push(
            ...list.map((item) => {
              const { examIds } = this.vm
              const { subject: subjectId, id: examId } = item
              const storage_exam_ids_item = this.vm.storageExamIds[currentSubjectId]

              // 标记是否已读
              if (!currentSubjectId) {
                item['unread'] = 1
                for (let subjectId in this.vm.storageExamIds) {
                  if (this.vm.storageExamIds[subjectId].find((id) => id === examId)) {
                    item['unread'] = 0
                    break
                  }
                }
              } else if (
                storage_exam_ids_item &&
                storage_exam_ids_item.find((id) => id === examId)
              ) {
                item['unread'] = 0
              } else {
                item['unread'] = 1
              }

              // 缓存id
              if (examIds[subjectId]) {
                const exam_ids = examIds[subjectId]
                examIds[subjectId] = Array.from(new Set(exam_ids.concat(examId)))
              } else {
                examIds[subjectId] = [examId]
              }

              return item
            })
          )
          this.pageNo++

          done()
        },
        reset: function () {
          this.pageNo = 1
          this.pageSize = 12
          this.loading = false
          this.hasMore = true
          this.list = []
        },
        todo: async function (item) {
          const { subject: subjectId, questionDataUrl } = item

          const loading = this.vm.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.5)'
          })
          // 一分钟内加载不成功关闭loading弹窗
          const timer = setTimeout(() => {
            loading.close()
          }, 60000)

          const questions = await getQuestionsApi(questionDataUrl, { subjectId })

          //关闭加载动画
          clearTimeout(timer)
          loading.close()

          this.vm.$store.commit('setCurrentHomework', {
            record: item,
            questions,
            questionIndex: 0
          })

          // 录入成绩
          this.vm.$router.push('/pages/homework-input/score/index')
        }
      }
    }
  },
  computed: {
    ...mapState(['homework']),
    ...mapGetters(['studentId'])
  },
  watch: {
    'settings.inputer.searchKey': function (newVal) {
      this.$refs.student_tree.filter(newVal)
    }
  },
  mounted() {
    this.$store.dispatch('initHomeworkInputStorage')
    this.subjects.getList((subjectId) => {
      this.homeworks.loading = false
      this.homeworks.getList(subjectId)

      // 初始化模块使用记录
      this.$store.commit('setCurrentModuleUse', {
        vm: this._self,
        type: MODULE_ID.HOMEWORK_INPUT,
        subjectId
      })
    })
  },
  methods: {
    ...mapActions(['getDictByType']),
    showSettingModal() {
      if (this.subjects.list.length === 0) return

      this.settings.init({
        subjects: {
          value: this.subjects.active,
          list: this.subjects.list
        }
      })
    },
    showChooseStudentModal() {
      this.settings.inputer.searchKey = ''
      this.settings.inputer.checkedListTemp = JSON.parse(
        JSON.stringify(this.settings.inputer.checkedList)
      )
      this.settings.inputer.onRadioChange(this.settings.inputer.searchBy)
      this.settings.isShowChooseStudentModal = true
    },
    onPageBack() {
      this.saveStorageExamIds()
      this.$router.back()
    },
    saveStorageExamIds() {
      // 缓存examIds
      const { examIds, storageExamIds } = this
      const newExamIds = {}

      for (let subjectId in examIds) {
        newExamIds[subjectId] = examIds[subjectId]
      }

      for (let subjectId in storageExamIds) {
        if (newExamIds[subjectId]) {
          const ids = newExamIds[subjectId]
          newExamIds[subjectId] = Array.from(new Set(storageExamIds[subjectId].concat(ids)))
        } else {
          newExamIds[subjectId] = storageExamIds[subjectId]
        }
      }

      for (let subjectId in newExamIds) {
        this.$storage.homework_input.getExamIdsItem(subjectId).then(({ success }) => {
          if (success) {
            this.$storage.homework_input.putExamIdsItem({
              subjectId,
              value: newExamIds[subjectId]
            })
          } else {
            this.$storage.homework_input.setExamIdsItem({
              subjectId,
              value: newExamIds[subjectId]
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar-btns {
  .item {
    height: 30px;
    .icon {
      width: 22px;
      height: 22px;
    }

    .name {
      font-size: 22px;
      line-height: 22px;
    }
  }
}

.setting-wrap {
  width: 100vw;
  height: 100vh;
  background: rgba($color: #000000, $alpha: 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1999;

  .setting {
    width: 646px;
    min-height: 158px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    border: 1px solid #707070;

    .header {
      .close {
        width: 16px;
        height: 16px;
        top: -12px;
        right: -24px;
      }

      .title {
        font-size: 26px;
        line-height: 30px;
      }
    }

    .main {
      font-size: 26px;
      line-height: 28px;
      word-break: break-all;

      .item {
        width: 100%;

        .label {
          font-size: 26px;
          color: #333;
        }
      }
    }

    .footer {
    }
  }
}

.choose-student-wrap {
  width: 100vw;
  height: 100vh;
  background: rgba($color: #000000, $alpha: 0.5);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1999;

  .choose-student {
    width: 760px;
    height: 686px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    border: 1px solid #707070;

    .close {
      width: 16px;
      height: 16px;
      top: 16px;
      right: 16px;
    }

    .main {
      font-size: 20px;
      line-height: 28px;
      word-break: break-all;

      .left .header,
      .right .header {
        height: 78px;
        font-size: 20px;
        border-bottom: 1px solid #f0f0f0;

        .el-radio {
          margin-right: 20px;
        }

        .el-radio:not(:last-child) {
          margin-bottom: 0;
        }
      }

      .left {
      }

      .right {
        border-left: 1px solid #f0f0f0;

        .student-item {
          border-bottom: 1px solid #f0f0f0;

          &:first-child {
            padding-top: 0;
          }

          .avatar {
            width: 40px;
            height: 40px;
            border-radius: 40px;
            font-size: 16px;
            font-weight: 600;
          }

          .name {
            font-size: 20px;
          }

          .close {
            width: 22px;
            height: 22px;
          }
        }

        .footer {
          .cancel {
            background: #fff !important;
            color: #51c3ff !important;
            border: 0.02rem solid #51c3ff;
          }
        }
      }
    }
  }
}
.tree-line {
  ::v-deep .el-tree-node {
    .el-icon-caret-right {
      &::before{
        content: '';
      }
    }
  }
}
</style>
